<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js图片切换练习</title>
    <style>
        body,p{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100%;
        }
        .box p{
            width: 100%;
            text-align: center;
        }
        .box p:nth-of-type(1){
            height: 80px;
            line-height: 80px;
        }
        .box p:nth-of-type(2){
            height: 20px;
            line-height: 20px;
        }
        .img{
            width: 300px;
            height: 400px;
            margin: 10px auto;
            border: 10px solid gray;
            position: relative;
        }
        .img img{
            width: 300px;
            height: 400px;
        }
        .img a{
            text-decoration: none;
            color: #fff;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 180px;
           /* border: 3px solid #fefefe;*/
            font-size: 25px;
            text-align: center;
            background: rgb(0 ,0,0,0.3);
        }
        .img a:nth-of-type(1){
            left: 0px;
        }
        .img a:nth-of-type(2){
            left: 260px;
        }
        .img span{
            display: block;
            position: absolute;
            width: 300px;
            height: 30px;
            text-align: 40px;
            text-align: center;
            left: 0px;
            background: rgb(0 ,0,0,0.3);
            line-height: 30px;
        }
        .img span:nth-of-type(1){
            top: 0px;
        }
        .img span:nth-of-type(2){
            top: 370px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oImg=document.getElementById("imgs");
            var oBtn1=document.getElementById("xhqh");
            var oBtn2=document.getElementById("shqh");
            var oSpan1=document.getElementById("span1");
            var oSpan2=document.getElementById("span2");
            var oA1=document.getElementById("a1");
            var oA2=document.getElementById("a2");
            var srcArr=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
            var index=0;
            function abc(){
                oSpan1.innerHTML=(index+1+"/"+srcArr.length);
                oSpan2.innerHTML=("这是第"+(index+1)+"图片");
                oImg.src="img/mv/"+srcArr[index];
            }
            abc();
            sxqh();
            oBtn2.onclick=function(){
                xhqh();
            }
            oBtn1.onclick=function(){
                sxqh();
            };
            function sxqh(){
                oA1.onclick=function(){
                    if(index==0){
                        index=srcArr.length-1;
                    }else{
                        index--;
                    }
                    abc();
                }
                oA2.onclick=function(){
                    if(index==(srcArr.length-1)){
                        index=0;
                    }else{
                        index++;
                    }
                    abc();
                }
            }

            function xhqh(){
                oA1.onclick=function(){
                    if(index==0){
                        alert("已经是第一张了！");
                    }else{
                        index--;
                    }
                    abc();
                }
                oA2.onclick=function(){
                    if(index==(srcArr.length-1)){
                        alert("已经是最后一张了！");
                    }else{
                        index++;
                    }
                    abc();
                }
            }

        }
    </script>
</head>
<body>
<div class="box">
    <p>
        <button   id="xhqh">循环切换</button>
        <button   id="shqh">顺序切换</button>
    </p>
    <p>图片只能切换到最后一张或者第一张</p>
    <div class="img" >
        <img  id="imgs" >
        <a href="javascript:;" id="a1"><</a>
        <a href="javascript:;" id="a2" >></a>
        <span id="span1"></span>
        <span id="span2"></span>
    </div>
</div>

</body>
</html>